<template>
  <div id="orderInfo">
    <div class="steps">
      <div class="box" v-if="step===0">
        <el-steps direction="vertical" :active="step">
          <el-step title="稽核"></el-step>
          <el-step title="发布"></el-step>
          <el-step title="处理"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>

      <div class="box" v-if="step===1 && data['eventTypeTwoCode']!=='-1'">
        <el-steps direction="vertical" :active="step">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="发布"></el-step>
          <el-step title="处理"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>

      <div class="box" v-if="step===1 && data['eventTypeTwoCode']==='-1'">
        <el-steps direction="vertical" :active="2">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="完成">
            <template slot="description">
              完成时间：{{data['jhTime']}}<br/>
            </template>
          </el-step>
        </el-steps>
      </div>


      <div class="box" v-if="step===2">
        <el-steps direction="vertical" :active="step">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="发布">
            <template slot="description">
              发布时间：{{data['fbTime']}}<br/>备注：{{data['fbNote']}}
            </template>
          </el-step>
          <el-step title="处理">
            <template slot="description">
              开始时间：{{data['startTime']}}<br/>
            </template>
          </el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>

      <div class="box" v-if="step===-1">
        <el-steps direction="vertical" :active="2">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="忽略">
            <template slot="description">
              忽略时间：{{data['hlTime']}}<br/>
            </template>
          </el-step>
          <el-step title="完成">
            <template slot="description">
              完成时间：{{data['hlTime']}}<br/>
            </template>
          </el-step>
        </el-steps>
      </div>

      <div class="box" v-if="step===3">
        <el-steps direction="vertical" :active="2">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="发布">
            <template slot="description">
              发布时间：{{data['fbTime']}}<br/>备注：{{data['fbNote']}}
            </template>
          </el-step>
          <el-step title="处理">
            <template slot="description">
              开始时间：{{data['startTime']}}<br/>
              结束时间：{{endTime}}<br>
              <span v-if="data['endTime']">处理结果：{{data['czNote']}}</span><br>
              <span v-if="data['endTime'] && data['images']">
                反馈图片：
                <em v-for="item in (data['images'].split(','))" @click="viewImg(item)" class="el-icon-picture-outline"></em>
              </span>
            </template>
          </el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>

      <div class="box" v-if="step===4">
        <el-steps direction="vertical" :active="4">
          <el-step title="稽核">
            <template slot="description">
              稽核时间：{{data['jhTime']}}<br/>备注：{{data['jhNote']}}
            </template>
          </el-step>
          <el-step title="发布">
            <template slot="description">
              发布时间：{{data['fbTime']}}<br/>备注：{{data['fbNote']}}
            </template>
          </el-step>
          <el-step title="处理">
            <template slot="description">
              开始时间：{{data['startTime']}}<br/>
              结束时间：{{data['endTime']}}<br>
              <span v-if="data['endTime']">处理结果：{{data['czNote']}}</span><br>
              <span v-if="data['endTime'] && data['images']">
                反馈图片：
                <em v-for="item in (data['images'].split(','))" @click="viewImg(item)" class="el-icon-picture-outline"></em>
              </span>
            </template>
          </el-step>
          <el-step title="完成">
            <template slot="description">
              完成时间：{{data['finishTime']}}<br/>
            </template>
          </el-step>
        </el-steps>
      </div>


    </div>
    <div class="baseInfo">
      <div class="item">
        <label>事件类型：</label>
        <output>{{evtType}}</output>
      </div>
      <div class="item">
        <label>工单状态：</label>
        <output>{{state}}</output>
      </div>
      <div class="item">
        <label>发生路段：</label>
        <output>{{road}}</output>
      </div>
      <div class="item">
        <label>发生位置：</label>
        <output>{{pos}}</output>
      </div>
      <div class="item">
        <label>所属中心：</label>
        <output>{{pre['groupName']}}</output>
      </div>
      <div class="item">
        <label>经度：</label>
        <output>{{lng}}</output>
      </div>
      <div class="item">
        <label>纬度：</label>
        <output>{{lat}}</output>
      </div>
      <div class="item">
        <label>发布部门：</label>
        <output>{{data['fbDepartment']}}</output>
      </div>
      <div class="item" v-if="pre.infoType==='event'">
        <label>检出时间：</label>
        <output>{{pre['detectedTime']}}</output>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "OrderInfo",
    props: {
      data2: {
        type: Object,
        default: {}
      },
      pre: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        dict: this.$kkui.cache.get('dict'),
        data:{}
      }
    },
    watch: {
      data2: {
        handler: function (n, o) {
          this.data=n;
        },
        deep: true
      }
    },

    mounted() {
    },
    computed: {
      allEvtTypes() {
        return {...this.dict['camera'], ...this.dict['event']};
      },
      evtType() {
        let type = '';
        if (this.pre.infoType === 'event') {
          const evtCode = this.pre['eventTypeTwoCode'];
          if (evtCode) {
            type = this.allEvtTypes[evtCode];
          }
        } else {
          type = this.pre['stateTwo'] <= 1 ? this.dict['camera'][this.pre['state']] : this.dict['camera'][this.pre['jhState']]
        }
        return type && type.indexOf('-') > -1 ? type.split('-')[1] : type;
      },
      state() {
        return this.dict['status'][this.data['state']]
      },
      road() {
        let road = '';
        if (this.pre.infoType === 'event') {
          const camera = this.pre['bscCamera'];
          if (camera) {
            road += camera['road'] + ' / ' + this.dict['cameraGroup'][camera['groupType']]
          }
        } else {
          road = this.pre['road']
        }

        return road;
      },
      endTime(){
        return this.data['endTime'];
      },
      pos() {
        let pos = '';
        if (this.pre.infoType === 'event') {
          pos = this.pre['bscCamera'] && this.pre['bscCamera']['name']
        } else {
          pos = this.pre['stakeNo']
        }
        return pos;
      },
      lng() {
        let lng = '';
        if (this.pre.infoType === 'event') {
          lng = this.pre['bscCamera'] && this.pre['bscCamera']['longitude']
        } else {
          lng = this.pre['longitude']
        }
        return lng;
      },
      lat() {
        let lat = '';
        if (this.pre.infoType === 'event') {
          lat = this.pre['bscCamera'] && this.pre['bscCamera']['latitude']
        } else {
          lat = this.pre['latitude']
        }
        return lat;
      },
      step() {
        return this.data.state - 1;
      },
    },
    methods:{
      viewImg(url){
        this.$kkui.dialog({
          width: '90%',
          height: '90%',
          cont: `<img src="${url}" style="width:100%; height100%;object-fit:contain;" />`
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  #orderInfo {
    height: 100%;
    overflow: hidden;
    display: flex;
    font-size: 14px;


    &:before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .2;
      background: url("~img/common/orderBg.png") -20px center no-repeat;
    }

    .steps {
      width: 50%;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      padding-left: 10px;

      .box {
        height: 100%;
      }
    }

    .baseInfo {
      width: 50%;
      padding: 15px;

      .item {
        display: flex;
        margin-bottom: 10px;

        label {
          width: 80px;
          text-align: right;
          color: #C0C4CC;
          line-height: 20px;
        }

        output {
          color: #404040;
        }
      }

    }
  }


  /deep/ .el-step__title.is-finish,
  /deep/ .el-step__description.is-finish,
  /deep/ .el-step__head.is-finish {
    color: #5CB87A;
    font-weight: bold;

    .el-step__icon.is-text {
      border-color: #5CB87A;
    }
  }

  .el-icon-picture-outline{
    cursor: pointer;
  }
  /deep/ .el-step__title.is-process,
  /deep/ .el-step__description.is-process,
  /deep/ .el-step__head.is-process {
    color: #1989FA;
    font-weight: bold;

    .el-step__icon.is-text {
      border-color: #1989FA;
    }
  }
</style>
